<template>
  <dl class="sea-breadcrumb">
    <dd v-for="(item, idx) in options" :key="idx"
        class="sea-breadcrumb-item" @click="handlerChange(item)">
      <a><strong>{{ item.label }}</strong></a>
      <span class="sea-breadcrumb-separator">{{ separator }}</span>
    </dd>
  </dl>
</template>

<script>

/**
 * 面包屑
 *
 * 极简面包屑，无过多的设计，更容易嵌套在系统的界面中。
 * 样式设计上，与步骤条基本一致，如果仅用于展示，可以用这个组件展示。
 */
export default {
    name: "SeaBreadcrumb"
    , props: {
        // 值字段名
        value: {type: [String, Boolean, Number], default: ''}
        // 数据字典
        , options: {type: [Array, String], default: undefined}
        // 分隔符
        , separator: {type: String, default: '>'},
    }
    , data() {
        return {
            // 之前的值
            post: undefined
        }
    }
    , watch: {
        value: {
            handler: function (val) {
                for (let i = 0; i < this.options.length; i++) {
                    let ele = this.options[i];
                    if (ele.value === val) {
                        this.handlerChange(ele);
                    }
                }
            }
            , immediate: true
        }
    }
    , methods: {
        /**
         * 处理变化事件
         * @param val 选中的节点
         */
        handlerChange: function (val) {
            if (this.post !== val) {
                this.post = val;
                this.$emit('change', val);
            }
        }
    }
}
</script>
